<template>
  <view>
    <view class="refuse-dialog-mask" v-if="show" @click="onClose"></view>
    <view class="refuse-dialog" :class="{show: show}">
      <view class="refuse-title">请选择拒绝原因</view>
      <view class="refuse-list">
        <view
          v-for="(item, idx) in reasons"
          :key="idx"
          class="refuse-item"
          :class="{active: selectedReason === item}"
          @click.stop="selectReason(item)"
        >{{item}}</view>
      </view>
      <button
        class="refuse-submit"
        :disabled="!selectedReason"
        :class="{disabled: !selectedReason}"
        @click="submit"
      >提交</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'RefuseReasonDialog',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    reasons: {
      type: Array,
      default: () => [
        '快递/配送员联系不上',
        '商品破损/少件',
        '商品与描述不符',
        '临时有事无法收货',
        '商品质量问题',
        '其他原因'
      ]
    }
  },
  data() {
    return {
      selectedReason: ''
    }
  },
  watch: {
    show(val) {
      if (!val) this.selectedReason = '';
    }
  },
  methods: {
    selectReason(item) {
      this.selectedReason = item;
    },
    submit() {
      if (!this.selectedReason) return;
      this.$emit('submit', this.selectedReason);
      this.selectedReason = '';
    },
    onClose() {
      this.$emit('close');
      this.selectedReason = '';
    }
  }
}
</script>

<style scoped lang="scss">
.refuse-dialog-mask {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1001;
  animation: fadeIn 0.2s;
}
.refuse-dialog {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  z-index: 1002;
  padding: 40rpx 40rpx 30rpx 40rpx;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(.25,.8,.25,1);
  box-shadow: 0 -8rpx 32rpx rgba(0,0,0,0.08);
  .refuse-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #222;
    margin-bottom: 32rpx;
    text-align: center;
  }
  .refuse-list {
    margin-bottom: 40rpx;
    .refuse-item {
      padding: 28rpx 0;
      border-bottom: 1px solid #f5f5f5;
      font-size: 30rpx;
      color: #333;
      text-align: left;
      position: relative;
      cursor: pointer;
      &.active {
        color: #FE3143;
        font-weight: bold;
        &::after {
          content: '';
          display: inline-block;
          width: 24rpx;
          height: 24rpx;
          border-radius: 50%;
          background: #FE3143;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
  .refuse-submit {
    width: 100%;
    line-height: 80rpx;
    background: #FE3143;
    color: #fff;
    font-size: 32rpx;
    border-radius: 40rpx;
    border: none;
    font-weight: bold;
    margin-top: 10rpx;
    transition: background 0.2s;
    &.disabled, &:disabled {
      background: #f5a1a8;
      color: #fff;
    }
  }
}
.refuse-dialog.show {
  transform: translateY(0);
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style> 